<template>
	<transition name="el-zoom-in-center">
		<div class="JNPF-preview-main">
			<div class="JNPF-common-page-header">
				<el-page-header @back="goBack" :content="!dataForm.id ? '新建' : isDetail ? '详情' : '编辑'"/>
				<div class="options">
					<el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail">确 定</el-button>
					<el-button @click="goBack">取 消</el-button>
				</div>
			</div>
			<el-row :gutter="15"  class="main" :style="{margin: '0 auto',width:'100%'}">
			<el-form ref="elForm" :model="dataForm" size="medium" label-width="145px" label-position="right" :disabled="!!isDetail" :rules="rules">
				<el-col :span="12">
					<el-form-item label="装置名称" prop="zzmc" required >
						<el-input v-model="dataForm.zzmc" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="装置位号" prop="zzwh" required >
						<el-input v-model="dataForm.zzwh" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="装置型号" prop="zzxh" required >
						<el-input v-model="dataForm.zzxh" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="装置位置" prop="zzwz" required >
						<el-input v-model="dataForm.zzwz" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="是否关键装置" prop="sfgjzz" required >
						<el-radio-group v-model="dataForm.sfgjzz" :style='{}' >
							<el-radio v-for="(item, index) in sfgjzzOptions" :key="index" :label="item.id"  >{{item.fullName}}</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="所属危险工艺" prop="sswxgy" required >
						<el-input v-model="dataForm.sswxgy" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="涉及主要危化品" prop="sjzywhp" required >
						<el-input v-model="dataForm.sjzywhp" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="装置周围环境" prop="zzzwhj" required >
						<el-input v-model="dataForm.zzzwhj" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="装置功能" prop="zzgn" required >
						<el-input v-model="dataForm.zzgn" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="投用日期" prop="tyrq" required >
						<el-date-picker v-model="dataForm.tyrq" placeholder="请选择" clearable :style='{"width":"100%"}' type="date" format="yyyy-MM-dd" value-format="timestamp" >
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="经度" prop="jd" required >
						<el-input v-model="dataForm.jd" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="纬度" prop="wd" required >
						<el-input v-model="dataForm.wd" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="所属部门" prop="ssbm" required >
						<el-select filterable v-model="dataForm.ssbm" placeholder="请选择" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in ssbmOptions" :key="index" :label="item.F_FullName" :value="item.F_Id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="生产区域编号" prop="qy" >
						<el-select v-model="dataForm.qy" placeholder="请选择" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in qyOptions" :key="index" :label="item.QYMC" :value="item.QYWH" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="所属重大危险源编号" prop="sszdwxydybh" >
						<el-select v-model="dataForm.sszdwxydybh" placeholder="请选择" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in sszdwxydybhOptions" :key="index" :label="item.ZDWXYMC" :value="item.ZDWXYBM" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="自动化控制方式" prop="zdhkzfs" >
						<el-input v-model="dataForm.zdhkzfs" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="现场照片" prop="xczp" >
						<JNPF-UploadImg v-model="xczpList" accept="" :fileSize="20" sizeUnit="MB" :limit="9" >
						</JNPF-UploadImg>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="备注" prop="bz" >
						<el-input v-model="dataForm.bz" placeholder="请输入" show-word-limit :style='{"width":"100%"}' type="textarea" :autosize='{"minRows":4,"maxRows":4}' >
						</el-input>
					</el-form-item>
				</el-col>
			</el-form>
			</el-row>
		</div>
	</transition>

</template>
<script>
import request from '@/utils/request'
import {getDictionaryDataSelector}from '@/api/systemData/dictionary'
import {previewDataInterface}from '@/api/systemData/dataInterface'
export default {
    data() {
      return {
        visible: false,
        isDetail: false,
        dataForm: {
					zzmc:undefined,
					zzwh:undefined,
					zzxh:undefined,
					zzwz:undefined,
					sfgjzz:"1",
					sswxgy:undefined,
					sjzywhp:undefined,
					zzzwhj:undefined,
					zzgn:undefined,
					tyrq:undefined,
					jd:undefined,
					wd:undefined,
					ssbm:undefined,
					qy:undefined,
					sszdwxydybh:undefined,
					zdhkzfs:undefined,
					xczp:[],
					bz:undefined,

        },
        rules: {
						zzmc:[
						{
							required:true,
							message:'请输入装置名称',
							trigger:'blur'
						},
						],
						zzwh:[
						{
							required:true,
							message:'请输入装置位号',
							trigger:'blur'
						},
						],
						zzxh:[
						{
							required:true,
							message:'请输入装置型号',
							trigger:'blur'
						},
						],
						zzwz:[
						{
							required:true,
							message:'请输入装置位置',
							trigger:'blur'
						},
						],
						sfgjzz:[
						{
							required:true,
							message:'请输入是否关键装置',
							trigger:'blur'
						},
						],
						sswxgy:[
						{
							required:true,
							message:'请输入所属危险工艺',
							trigger:'blur'
						},
						],
						sjzywhp:[
						{
							required:true,
							message:'请输入涉及主要危化品',
							trigger:'blur'
						},
						],
						zzzwhj:[
						{
							required:true,
							message:'请输入装置周围环境',
							trigger:'blur'
						},
						],
						zzgn:[
						{
							required:true,
							message:'请输入装置功能',
							trigger:'blur'
						},
						],
						tyrq:[
						{
							required:true,
							message:'请输入投用日期',
							trigger:'blur'
						},
						],
						jd:[
						{
							required:true,
							message:'请输入经度',
							trigger:'blur'
						},
						],
						wd:[
						{
							required:true,
							message:'请输入纬度',
							trigger:'blur'
						},
						],
						ssbm:[
						{
							required:true,
							message:'请输入所属部门',
							trigger:'blur'
						},
						],

        },
				sfgjzzOptions:[{"fullName":"否","id":"0"},{"fullName":"是","id":"1"}],
				ssbmOptions:[],
				qyOptions:[],
				sszdwxydybhOptions:[],

					xczpList:[],

      }
    },
    created() {
		this.getssbmOptions();
		this.getqyOptions();
		this.getsszdwxydybhOptions();

    },
    methods: {
		getssbmOptions()
		{
			previewDataInterface('772d2cbcadd24df79243e3d92ef5f690').then(res => {
				this.ssbmOptions = res.data
			})
		},
		getqyOptions()
		{
			previewDataInterface('96214c874e4441c394e8bc268ea6d74e').then(res => {
				this.qyOptions = res.data
			})
		},
		getsszdwxydybhOptions()
		{
			previewDataInterface('707f1102bce74818a551ebcfa88f2321').then(res => {
				this.sszdwxydybhOptions = res.data
			})
		},

           goBack() {
                    this.$emit('refresh')
                },
      init(id, isDetail) {

        this.dataForm.id = id || 0;
        this.visible = true;
        this.isDetail = isDetail || false;
        this.$nextTick(() => {
          this.$refs['elForm'].resetFields();
          if (this.dataForm.id) {
            request({
              url: '/api/System/qyscSczz/' + this.dataForm.id,
              method: 'get'
            }).then(res =>{
              this.dataForm = res.data;
				this.xczpList = this.dataForm.xczp ? JSON.parse(this.dataForm.xczp) : [];

            })
          }
        })
      },
      // 表单提交
      dataFormSubmit() {
				this.$set(this.dataForm, 'xczp', JSON.stringify(this.xczpList));

        this.$refs['elForm'].validate((valid) => {
          if (valid) {
            if (!this.dataForm.id) {
              request({
                url: '/api/System/qyscSczz',
                method: 'post',
                data: this.dataForm,
              }).then((res) =>{
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1000,
                  onClose: () =>{
                    this.visible = false;
                    this.$emit('refresh', true);
                  }
                })
              })
            } else {
              request({
                url: '/api/System/qyscSczz/' + this.dataForm.id,
                method: 'PUT',
                data: this.dataForm
              }).then((res) =>{
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1000,
                  onClose: () =>{
                    this.visible = false;
                    this.$emit('refresh', true);
                  }
                })
              })
            }
          }
        })
      },

    }
  }
  </script>